How to set the style of the line segments in a line chart, such as dashed at the end?

Question Description

I have a line chart demand. In the chart, the last data point of the line is predicted data, so I want the last section of the line to be displayed as a dashed line, similar to the picture below. How can this be implemented more conveniently?

Solution

I recommend VChart, and the official website demo has the effect you need: https://visactor.io/vchart/demo/line-chart/dash-line . It can return different styles based on the data in the callback of the line mark style.

• lineDash: Dashed mode. It uses a set of values to specify the alternating lengths of the lines and gaps that describe the pattern.

line: {
  style: {
    stroke: (data) => data.latest ? 'blue': 'green',
    lineDash: data => data.latest ? [5, 5]: [0]
  }
},
point: {
  style: {
    fill: (data) => data.latest ? 'blue': 'green',
  }
}

Code Example

Quote

• More demos
• Related API
• github